<template>
  <div id="container">
    <el-row>
      <el-col :span="16" :offset="4">
        <el-card class="box-card">
          <el-col>
            <el-row>
              <div class="block">
                <a href="javascript:0" @click="uploadVisible = true">
                  <el-avatar :size="150" :src="userInfo.avatar"></el-avatar>
                </a>
                <!-- 上传图片 -->
                <el-dialog
                  title="头像上传"
                  :visible.sync="uploadVisible"
                  width="30%"
                  center
                  :before-close="cancel"
                >
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="/api/common/avatar"
                    :headers="{Authorization:this.$store.state.authorization}"
                    :data="{username:this.$store.state.user.username}"
                    accept=".jpg,.png"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :auto-upload="true"
                    list-type="picture"
                  >
                    <el-button slot="trigger" size="small" type="primary"
                    >选择头像
                    </el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                  <span slot="footer" class="dialog-footer">
                  <el-button @click="cancel()">取 消</el-button>
                  </span>
                </el-dialog>
              </div>
            </el-row>

            <el-row>
              <el-col :span="4" :offset="10" style="margin-top: 12px;font-size: 24px;font-weight: bold">
                <div>{{ userInfo.nickname }}</div>
              </el-col>
            </el-row>
            <el-row v-if="sign==='STUDENT'">
              <el-col :span="4" :offset="10" style="margin-top: 10px;font-size: 18px;">
                <div>软件技术1802</div>
              </el-col>
            </el-row>
          </el-col>

          <el-col style="text-align: left">
            <el-divider content-position="left" style="font-weight: bold"><span
              style="font-weight: bolder;font-size: 24px">用户信息</span></el-divider>
            <el-row style="font-size: 18px">
              <el-col :span="5" :offset="1">
                <p><i class="el-icon-user-solid"></i> 用户名: <span>{{ userInfo.username }}</span></p>
              </el-col>
              <el-col :span="5" :offset="3">
                <p><i class="el-icon-user"></i> 姓名: <span>{{ userInfo.name }}</span></p>
              </el-col>
              <el-col :span="5" :offset="2">
                <p><i class="el-icon-star-off"></i> 性别: <span>{{ userInfo.gender }}</span></p>
              </el-col>
            </el-row>
            <el-row style="font-size: 18px;margin-top: 20px">
              <el-col :span="7" :offset="1" >
                <p><i class="el-icon-position"></i> 邮箱: <span>{{ userInfo.email }}</span></p>
              </el-col>
              <el-col :span="6" :offset="1">
                <p><i class="el-icon-time"></i> 出生日期: <span>{{ userInfo.birthday |dateFmt('YYYY-MM-DD') }}</span></p>
              </el-col>
              <el-col :span="6" :offset="1">
                <p><i class="el-icon-phone-outline"></i> 联系方式: <span>{{ userInfo.mobile }}</span></p>
              </el-col>
            </el-row>
          </el-col>

          <el-col style="text-align: left">
            <el-divider content-position="left"><span style="font-weight: bolder;font-size: 24px">用户操作</span>
            </el-divider>
            <el-row>
              <el-col :span="4" :offset="1" style="margin-top: 20px">
                <p>
                  <router-link :to="{path:'/updatePassword'}">
                    <el-button round size="large " type="primary " icon="el-icon-lock">修改密码</el-button>
                  </router-link>
                </p>
              </el-col>
              <el-col :span="4" :offset="4" style="margin-top: 20px">
                <p>
                  <router-link :to="{path:'/updateDetails'}">
                    <el-button round size="large " type="primary " icon="el-icon-message ">修改信息</el-button>
                  </router-link>
                </p>
              </el-col>
              <el-col :span="4" :offset="4" style="margin-top: 20px">
                <p>
                  <el-button round size="large " type="primary " icon="el-icon-s-custom" @click="editNickname">修改昵称
                  </el-button>
                </p>
              </el-col>
            </el-row>
          </el-col>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Details',
  data () {
    return {
      sign: '',
      uploadVisible: false,
      userInfo: {
        username: '',
        class: '',
        email:'',
        nickname: '',
        name: '',
        birthday: '',
        avatar: '',
        gender: '',
        mobile: ''
      },
    }
  },
  methods: {
    editNickname () {
      this.$prompt('请输入昵称', '修改昵称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$http({
          url: '/api/user/update/nickname ',
          method: 'post',
          data: {
            username: this.userInfo.username,
            nickname: value
          },
        }).then((res) => {
          if (res.data.code === 6062) {
            this.$store.commit('changeUserNickname', { nickname: value })
            this.userInfo.nickname = value
            this.$message({
              type: 'success',
              message: '新的昵称为: ' + value,
              duration: 1500,
            })
          } else {
            this.$message({
              type: 'error',
              message: '更新昵称失败',
              duration: 2000,
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消更新昵称',
          duration: 2000,
        })
      })
    },
    cancel () {
      this.uploadVisible = false
      this.$refs.upload.clearFiles()
    },
    handleSuccess (res) {
      this.userInfo.avatar = this.$host + res.result
      this.$store.commit('changeUserAvatar', { avatar: res.result })
      this.$message({
        message: '更换头像成功',
        type: 'success',
        center: true,
        duration: 1000,
        onClose: () => {
          //此处写提示关闭后需要执行的函数
          this.uploadVisible = false
          this.$refs.upload.clearFiles()
        }
      })
    },
    handleError (res) {
      this.$message({
        message: '更换头像失败',
        type: 'error',
        center: true,
        duration: 1000,
        onClose: () => {
          //此处写提示关闭后需要执行的函数
          this.uploadVisible = false
          this.$refs.upload.clearFiles()
        }
      })
    },
    iniUser () {
      //初始化用户信息(user)
      this.userInfo = JSON.parse(JSON.stringify(this.$store.state.user))

      //初始化身份信息(student)
      if (this.sign === 'STUDENT') {
        this.userInfo.class = this.$store.state.user.class
      }

      if (this.userInfo.avatar != null && this.userInfo.avatar !== '') {
        this.userInfo.avatar = this.$host + this.userInfo.avatar
      } else {
        this.userInfo.avatar = require('../../assets/default.png')
      }

      if (this.userInfo.nickname != null && this.userInfo.nickname !== '') {
        this.userInfo.nickname = this.userInfo.nickname
      } else {
        this.userInfo.nickname = '默认昵称'
      }

      if (this.userInfo.gender === 0) {
        this.userInfo.gender = '男'
      } else if (this.userInfo.gender === 1) {
        this.userInfo.gender = '女'
      } else {
        this.userInfo.gender = '未知'
      }
    },
  },
  created () {
    this.iniUser()
  },
  computed:{
    changeUser(){
      return this.$store.state.user;
    }
  },
  watch:{
    changeUser(){
      this.userInfo =  this.$store.state.user;
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.box-card {
  margin-top: 30px;
  height: 580px;
}

p {
  color: #a79f9f;
}

span {
  color: black;
}
</style>
